import { useState, useEffect } from 'react'
import JudgeAnalysis from '../../common/JudgeAnalysis';
import LittleTitle from '../../../../../../common/LittleTitle';
import { Descriptions, Table, Button, message } from 'antd';
import FetchHelper from '../../../../../../../utils/helper/fetch-helper';
import VideoMonitorModal from '../../Toolbar/VideoMonitorModal';
export default function RcxDetail(props) {
    const { item } = props;
    const [visible, setVisible] = useState(false);
    const [ids, setIds] = useState([]);
    const [loading, setLoading] = useState(false);
    return <div className=' layout-v '>
        <div className='layout-v'>
            <LittleTitle >基本信息</LittleTitle>
            <div style={{
                padding: 12
            }}>

                <Descriptions bordered column={1} size='middle'>
                    <Descriptions.Item label="名称">{item.installPosition}</Descriptions.Item>
                    <Descriptions.Item label="经度">{item.longitude}</Descriptions.Item>
                    <Descriptions.Item label="纬度">{item.latitude}</Descriptions.Item>
                    <Descriptions.Item label="ip">{item.ip}</Descriptions.Item>
                    <Descriptions.Item label="监控">
                        <Button loading={loading} size='small' type='link' onClick={() => {
                            setLoading(true);
                            FetchHelper.postJson('/admin-api/ybyj/sp/device/Tree', {
                                "type": "001;;1",
                                "checkStat": 0,
                                "act": "search",
                                "searchKey": item.installPosition
                            }).then(res => {
                                if (res.code === 200 && res.data.success) {
                                    const ids = res.data?.data?.value?.map(item => item.id);
                                    if (ids.length > 0) {
                                        setIds(ids);
                                        setVisible(true);
                                    } else {
                                        message.error('未找到视频监控信息');
                                    }
                                } else {
                                    message.error('获取视频监控失败');
                                }
                            }).finally(() => {
                                setLoading(false);
                            });
                        }}>
                            查看
                        </Button>
                    </Descriptions.Item>
                </Descriptions>
            </div>
        </div>
        <JudgeAnalysis item={item} />
        {visible && <VideoMonitorModal visible={visible} onCancel={() => {
            setVisible(false);
        }} autoExpandIds={ids} />}
    </div>;
}